<template>
    <div>
    <el-dialog v-model="dialogVisible" width="80%" align-center :show-close="false" @close="handleClose" draggable
        destroy-on-close>
        <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
                <div>{{ title }}</div>
                <el-icon class="el-icon--left cursor-pointer" @click="close">
                    <CircleCloseFilled color="#fff" />
                </el-icon>
            </div>
        </template>
        <div class="bg-white my-[10px]">
            <BaseHead>基本信息</BaseHead>
            <BaseTable>
                <tr>
                    <td class="td-subname">经费卡号</td>
                    <td colspan="3"> {{ ProjectShow.feeCardNum }}</td>
                    <td class="td-subname">经费负责人</td>
                    <td colspan="3"> {{ProjectShow.feeChargerName }}</td>
                </tr>
                <tr>
                    <td class="td-subname">项目名称</td>
                    <td colspan="3"> {{ProjectShow.projectName }}</td>
                    <td class="td-subname">项目负责人</td>
                    <td colspan="3"> {{ ProjectShow.chargerName }}</td>
                </tr>
                <tr>
                    <td class="td-subname">项目分类</td>
                    <td colspan="3">
                        <CommonTreeLabel :dataList="projectTypeList" :value="ProjectShow.projectType" />
                    </td>
                    <td class="td-subname">总预算</td>
                    <td colspan="3"> {{ FloatDiv(ProjectShow.budgettotal,10000) }}<span> 万元</span></td>
                </tr>
                <tr>
                    <td class="td-subname">总到账</td>
                    <td colspan="3"> {{ FloatDiv(ProjectShow.incometotal,10000) }}<span> 万元</span></td>
                    <td class="td-subname">结余</td>
                    <td colspan="3"> {{ FloatDiv(ProjectShow.paytotal,10000) }}<span> 万元</span></td>
                </tr>
            </BaseTable>
        </div>
        <div class="bg-white my-[10px]">
            <BaseHead>到账信息</BaseHead>
            <el-table :data="claimList" class="w-full" border stripe>
                <el-table-column type="index" label="序号" width="60px" />
                <el-table-column prop="dch" label="对冲号" />
                <el-table-column prop="incomeType" label="来款类型">
                    <template #default="{ row }">
                        <CommonLabel :dataList="incomeTypeList" :value="row.incomeType" />
                    </template>
                </el-table-column>
                <el-table-column label="本次入账（万元）">
                    <template #default="{ row }">
                        <span>{{ FloatDiv(row.incomeFee, 10000) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="schoolFee" label="留校金额">
                    <template #default="{ row }">
                        <span>{{ FloatDiv(row.schoolFee, 10000) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="outboundFee" label="外拨金额">
                    <template #default="{ row }">
                        <span>{{ FloatDiv(row.outboundFee, 10000) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="incomeDate" label="到账日期" />
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" plain @click="handleViewClaim(row)"> 查看 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <div class="operate-btns">
                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
    </div>
    <ViewModal ref="viewClaimModalRef"/>
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/fee/components/BaseTable.vue";
import CommonLabel from "@/views/fee/components/CommonLabel.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import ViewModal from "@/views/fee/rz/jfkrz/components/ViewModal.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import { FloatDiv } from "@/utils/pub";
import { getList } from "@/api/fee/rz/jfkrz/index.js";
import { ref } from "vue";
const dialogVisible = ref(false);
const projectTypeList = useCommonFetch("项目分类（所有-有级联）");
const incomeTypeList = useCommonFetch("来款类型"); //来款类型
const ProjectShow = ref();
const claimList= ref();
const viewClaimModalRef = ref();
const title = computed(() => {
  return "经费卡查看";
});

const view = async (row) => {
    dialogVisible.value = true;
    ProjectShow.value= row;
    initclaimList(row.feeCardNum);
};

defineExpose({view});

const initclaimList = async (feeCardNum)=>{
    let params = {pageNum: 1,pageSize: 10,feeCardNum: feeCardNum,};
    try {
        const res = await getList(params);
        if (res.code == 200) {
            claimList.value = res.rows;
        }
    } catch (error) {
        console.log(error);
    }
}

//查看页面
const handleViewClaim = (row)=>{
    viewClaimModalRef.value.view(row);
}

</script>

<style scoped lang="scss">
@import url("@/views/fee/index.scss");
</style>